<template>
  <div class="box">
    <!-- 添加-------------------------------- -->
    <div align="right">
      <el-button type="success" @click="addVideo">添加视频</el-button>
    </div>
    <el-table :data="list" border fit highlight-current-row>
      <el-table-column type="expand">
        <template slot-scope="scope">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="视频id">
              <span>{{ scope.row.course_id }}</span>
            </el-form-item>
            <el-form-item label="视频名称">
              <span>{{ scope.row.part_name }}</span>
            </el-form-item>
            <el-form-item label="视频介绍">
              <span>{{ scope.row.brief }}</span>
            </el-form-item>
            <el-form-item label="视频创建时间">
              <span>{{ dateFormat(scope.row.create_time) }}</span>
            </el-form-item>
            <el-form-item label="视频">
              <el-button
                type="success"
                plain
                @click="playVideo(scope.row)"
                ref="btn"
                size="mini"
              >
                播 放
              </el-button>
            </el-form-item>
            <el-form-item label="更新新视频">
              <el-button
                type="success"
                @click="addType(scope.row)"
                icon="el-icon-plus"
              ></el-button>
            </el-form-item>
            <!-- 视频 -->
          </el-form>
        </template>
      </el-table-column>
      <el-table-column label="视频章节">
        <template slot-scope="scope">
          第{{ scope.row.part_number }}章
        </template>
      </el-table-column>
    </el-table>
    <!-- 弹框效果 -->
    <el-dialog :visible.sync="dialogVisible" style="text-align: center">
      <el-form :model="detail" :key="index">
        <el-form-item label="视频">
          <video v-if="list.content" width="750" height="480" controls>
            <source :src="list.content" />
            您的浏览器不支持 HTML5 video 标签。
          </video>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 新增视频 -->
    <el-dialog :visible.sync="videoadd" :title="新增视频章节">
      <el-form
        style="width: 80%"
        :model="courseVideo"
        :rules="rules"
        ref="ruleForm"
      >
        <el-form-item label="视频id" label-width="100px">
          <el-input
            autocomplete="off"
            v-model="courseVideo.course_id"
          ></el-input>
        </el-form-item>
        <el-form-item label="视频章节" label-width="100px">
          <el-input
            autocomplete="off"
            v-model="courseVideo.part_number"
          ></el-input>
        </el-form-item>
        <el-form-item label="视频名称" label-width="100px">
          <el-input
            autocomplete="off"
            v-model="courseVideo.part_name"
          ></el-input>
        </el-form-item>
        <el-form-item label="视频介绍" label-width="100px">
          <el-input autocomplete="off" v-model="courseVideo.brief"></el-input>
        </el-form-item>
        <el-form-item label="视频内容" label-width="100px">
          <!-- <el-input autocomplete="off" v-model="courseVideo.content"></el-input> -->
           <el-form style="width: 80%" :model="detail">
        <div class="title">视频设置</div>
        <div class="img__con">
          <el-upload
            class="avatar-uploader"
            action="http://42.194.159.131:8080/pic/imgUpload?path=course"
            :headers="headers"
            :show-file-list="true"
            :data="uploadImgData"
            ref="upload"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
            :on-progress="uploadVideoProcess"
          >
            <video
              width="100%"
              v-if="detail.imageUrl"
              controls="controls"
              :key="menuKey"
            >
              <source :src="detail.imageUrl" type="video/mp4" />
            </video>
            <i class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
          <p>说明: 视频格式为mp4格式，每个视频大小不超过300m</p>
        </div>

      </el-form>
        </el-form-item>
        <el-form-item label="视频是否下架" label-width="100px">
          <el-radio-group v-model="courseVideo.status">
            <el-radio label="0">否</el-radio>
            <el-radio label="1">是</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="videoadd = false">取 消</el-button>
        <el-button type="primary" @click="addVideos">添 加</el-button>
      </div>
    </el-dialog>
    <!-- 修改视频 -->
    <el-dialog :visible.sync="dialogFormVisible">
      <el-form style="width: 80%" :model="detail">
        <div class="title">视频设置</div>
        <div class="img__con">
          <el-upload
            class="avatar-uploader"
            action="http://42.194.159.131:8080/pic/imgUpload?path=course"
            :headers="headers"
            :show-file-list="true"
            :data="uploadImgData"
            ref="upload"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
            :on-progress="uploadVideoProcess"
          >
            <video
              width="100%"
              v-if="detail.imageUrl"
              controls="controls"
              :key="menuKey"
            >
              <source :src="detail.imageUrl" type="video/mp4" />
            </video>
            <!-- <img v-if="list.cover_picture" :src="list.cover_picture" class="avatar" /> -->
            <i class="el-icon-plus avatar-uploader-icon"></i>
            <!-- <el-progress
              v-if="videoFlag == true"
              type="line"
              :percentage="videoUploadPercent"
              style="margin-top: 30px"
            ></el-progress> -->
          </el-upload>
          <p>说明: 视频格式为mp4格式，每个视频大小不超过300m</p>
        </div>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">上传</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import healcoursevideo from "@/api/healthycourse";
import { getToken } from "@/utils/auth";
export default {
  data() {
    return {
      dialogFormVisible: false, //对话框（查看）
      list: [],
      dialogVisible: false,
      playerVisible: false,

      detail: {},
      courseVideo: {},
      headers: {
        Authorization: getToken(),
      },
      timeerId: 1,
      videoadd: false,
      uploadImgData: { busiName: 32 },
      // 应付多个组件的情况 记录当前组件的key值
      componentKey: null,
      menuKey: 1, // 用来强制刷新
      videoFlag: false, // 进度条相关的
      videoUploadPercent: 0, // 进度条相关的
      rules: {},
    };
  },
  //在页面渲染前执行
  //调用methods定义的方法，得到数据
  created() {
    this.fetchData();
  },
  //页面列表页渲染，请求接口调用
  methods: {
    onSubmit() {
      this.dialogFormVisible = false;
      this.fetchData();
    },
    handleAvatarSuccess(res, file) {
      // 进度条恢复到初始状态
      this.videoFlag = false;
      this.videoUploadPercent = 0;
      ++this.menuKey;
      this.timeerId++;
      // this.$refs.upload.clearFiles()
      console.log(this.$refs);
      this.detail.content = res.data.picUrl;
      console.log("上传视频成功", this.detail.content);
    },
    beforeAvatarUpload(file) {
      const isMp4 = file.type === "video/mp4";
      // 限制文件最大不能超过 300M
      const isLt2M = file.size / 1024 / 1024 < 300;
      if (!isMp4) {
        this.$message.error("视频只能是mp4格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 300MB!");
      }
      return isMp4 && isLt2M;
    },
    //进度条
    uploadVideoProcess(event, file, fileList) {
      this.videoFlag = true;
      this.videoUploadPercent = parseInt(file.percentage);
    },

    addVideo() {
      // this.$router.push("/HealthyCourse/adddetailvideo");
      console.log("aaaaa");
      this.videoadd = true;
      this.courseVideo = {}
    },
    //确认按钮
    async addVideos() {
      this.$refs.ruleForm.validate(async (success) => {
        if (success) {
          console.log("tttt");
          this.videoadd = false;
          let result = await healcoursevideo.addCourseVideo(this.courseVideo);
          console.log("tttttt", result);
          if (result.errorCode == 0) {
            this.$message({
              type: "success",
              message: "新增视频章节成功",
            });
          }
          this.fetchData(); // 更新商品列表
          // console.log("aaaaaaaaaaaaaaaaa", resp.data);
        } else {
          return false;
        }
      });
    },
    //时间格式化函数，此处仅针对yyyy-MM-dd hh:mm:ss 的格式进行格式化
    dateFormat: function (time) {
      var date = new Date(time);
      var year = date.getFullYear();
      /* 在日期格式中，月份是从0开始的，因此要加0
       * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
       * */
      var month =
        date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1;
      var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
      var hours =
        date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
      var minutes =
        date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
      var seconds =
        date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
      // 拼接
      return (
        year +
        "-" +
        month +
        "-" +
        day +
        " " +
        hours +
        ":" +
        minutes +
        ":" +
        seconds
      );
    },
    fetchData() {
      console.log("zsj", this.detail);
      // this.list = this.detail
      var id = this.$route.params.course_id;
      // console.log("2135464213", id);
      var vm = this;
      healcoursevideo
        .detailcourse(id)
        //请求成功调用
        .then((resp) => {
          vm.list = resp.data.coursePart;
          console.log("qqqqqqqqqqqqqq", vm.list);
        });
    },
    addType() {
      this.fetchData();

      this.dialogFormVisible = true;
      this.detail = {};
      console.log(this.detail.content);
      this.$refs.upload.clearFiles();
    },
    playVideo(row) {
      // this.fetchData()
      console.log(this.detail);
      this.dialogVisible = true;
      var vm = this;
      console.log("aaaaaaaaaaaa", row);
      if (this.timeerId === 1) {
        this.detail = { ...row };
        console.log(this.detail.content);
        this.list.content = this.detail.content;
      } else if (this.timeerId > 1) {
        this.list.content = this.detail.content;
      }
      console.log("sssss", this.detail.content);
      //  this.fetchData()
    },
  },
};
</script>

<style lang="scss" scoped>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 120px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}

  .avatar-uploader  {
    background-color: rgb(226, 244, 238);
    border: 1px dashed #dc1313;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    // width: 350px;
    // height: 50px;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }
  .avatar-uploader-icon {
    font-size: 16px;
    color: #8c939d;
    width: 350px;
    height: 30px;
    line-height: 30px;
    text-align: center;
  }
  .avatar {
    width: 350px;
    height: auto;
    display: block;
  }
  .title {
    font-size: 18px;
    margin-bottom: 20px;
  }
  .img__con {
    .el-button {
      width: 100%;
      margin: 10px 0 20px 0;
    }
  }

</style>
